<template>
    <div class="content">
        <div class="notice-list">
            <div
                class="notice-item"
                v-for="item in noticeList"
                :key="item.id"
                @click="toDetail(item.id)"
            >
                <div class="image">
                    <p class="name">{{ (item.studyhallName || '').slice(0, 2) }}</p>
                    <div class="room">自习室</div>
                </div>
                <div class="red" v-if="!item.readStatus"></div>
                <div class="right">
                    <div class="info">
                        <div class="title">
                            {{ item.title }}
                        </div>
                        <div class="top" v-if="item.recommendTop">置顶</div>
                        <p class="date">{{ formatTime(item.createTime) }}</p>
                    </div>
                    <div class="desc">
                        {{ item.content }}
                    </div>
                </div>
            </div>
        </div>
        <u-loadmore
            loadmoreText="找自习 来上岸"
            fontSize="24rpx"
            color="#D5D5D5"
            lineColor="#D5D5D5"
            marginTop="20"
            line
            v-if="noticeList.length > 0"
        />
        <div class="empty" v-if="empty">
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">暂无通知公告</p>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
    name: 'list',
    data() {
        return {
            noticeList: [],
            empty: false,
        };
    },
    onLoad(options) {
        if (options.id) {
            this.id = Number(options.id);
        }
    },
    onShow() {
        this.empty = false;
        this.getNoticeList();
    },
    methods: {
        getNoticeList() {
            let params = {};
            if (this.id) {
                params.studyhallId = this.id;
            }
            this.$Api.study.notice.list(params).then(res => {
                this.noticeList = res.map(e => {
                    let content = e.content;
                    content = content.replace(/<p>/g, '');
                    content = content.replace(/<\/p>/g, '');
                    content = content.replace(/<br>/g, '');
                    return {
                        ...e,
                        content,
                    };
                });
                if (res.length === 0) {
                    this.empty = true;
                }
            });
        },
        formatTime(val) {
            return dayjs(val).format('MM月DD日');
        },
        toDetail(id) {
            uni.navigateTo({
                url: '/pages/notice/detail?id=' + id,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx 30rpx;
    .notice-list {
        width: 100%;
        .notice-item {
            width: 100%;
            padding: 30rpx 24rpx;
            margin-bottom: 20rpx;
            background: #fff;
            border-radius: 24rpx;
            position: relative;
            box-sizing: border-box;
            @include flexBox(space-between, flex-start);
            .red {
                width: 20rpx;
                height: 20rpx;
                background: #ff5518;
                border-radius: 50%;
                position: absolute;
                left: 100rpx;
                top: 24rpx;
            }
            .image {
                width: 88rpx;
                height: 88rpx;
                background: #5428ec;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 32rpx;
                .name {
                    text-align: center;
                    color: #fff;
                    font-size: 30rpx;
                    padding: 10rpx 0;
                }
                .room {
                    background: #e6dfff;
                    font-size: 24rpx;
                    color: #5428ec;
                    padding-left: 6rpx;
                }
            }
            .right {
                flex: 1;
                overflow: hidden;
                .info {
                    width: 100%;
                    @include flexBox(space-between, flex-start);
                    .title {
                        font-size: 30rpx;
                        font-weight: 600;
                        color: #2f2f2f;
                        flex: 1;
                        @include flexBox(flex-start, flex-start);
                    }
                    .top {
                        color: #5428ec;
                        border: 1rpx solid #5428ec;
                        border-radius: 4rpx;
                        font-size: 20rpx;
                        white-space: nowrap;
                        margin: 0 10rpx;
                        padding: 0 4rpx;
                    }
                    .date {
                        font-size: 24rpx;
                        color: #898989;
                        white-space: nowrap;
                    }
                }
                .desc {
                    width: 100%;
                    font-size: 28rpx;
                    color: #898989;
                    margin-top: 10rpx;
                    @include ellipsis(1);
                }
            }
        }
    }
}
</style>
